<template>
	<view class="my-content">
		<view class="u-flex u-row-center fixTop bgWhite">
			<view class="u-flex-1 u-text-center">
				<view class="title">{{$t("任务类型")}}</view>
				<view class="colorRed line-height">批量拜访</view>
			</view>
			<view class="u-flex-1 u-text-center">
				<view class="title">{{$t("任务需求")}}</view>
				<view class="colorRed line-height">电话销售</view>
			</view>
			<view class="u-flex-1 u-text-center">
				<view class="title">{{$t("预估费用")}}</view>
				<view class="number u-margin-top-10">
					<text style="font-size: 30rpx;">￥</text>
					8900
				</view>
			</view>
		</view>
		<Title :title="$t('服务')"></Title>
		<u-card margin="0" :show-head="false">
			<view slot="body" class="u-flex">
				<view class="u-flex-1">
					<view class="bfCheckCard">
						<view>{{$t("企业数量")}}</view>
						<view class="number">300</view>
					</view>
				</view>
				<view class="u-flex u-flex-2 u-flex-wrap u-margin-left-20" style="margin-bottom: -20rpx;">
					<u-tag v-for="item in serverList" :key="item.id" :text="item.name" bg-color="#fffde9"
						border-color="transparent" color="#ffb20d" class="serverBtn" type="warning" />
				</view>
			</view>
		</u-card>
		<Title :title="$t('材料')"></Title>
		<u-card margin="0" :show-head="false">
			<view slot="body">
				<view class="u-margin-bottom-20">{{$t("拜访名单")}}</view>
				<view class="u-flex u-margin-bottom-20">
					<u-button type="primary" :custom-style="btnStatusBfStyle" hover-class="none">
						拜访名单01
					</u-button>
				</view>
				<view class="u-flex">
					<view class="bfCheckCard u-margin-right-10">
						<view>{{$t("企业数量")}}</view>
						<view class="number">300</view>
					</view>
					<view class="bfCheckCard u-margin-left-10">
						<view>{{$t("企业数量")}}</view>
						<view class="number">300</view>
					</view>
				</view>
			</view>
		</u-card>

		<u-card margin="0" :show-head="false" class="u-margin-top-30">
			<view slot="body">
				<view class="u-margin-bottom-20">{{$t("企业对接人")}}</view>
				<u-input class="u-margin-bottom-20" height="60" :placeholder="$t('请输入')" disabled
					:custom-style="myStyle1" :placeholder-style="placeholderStyle" />
				<view class="u-margin-bottom-20">{{$t("联系电话")}}</view>
				<u-input class="u-margin-bottom-20" height="60" :placeholder="$t('请输入')" disabled
					:custom-style="myStyle1" :placeholder-style="placeholderStyle" />
				<view class="u-margin-bottom-20">{{$t("微信")}}</view>
				<u-input class="u-margin-bottom-20" height="60" :placeholder="$t('请输入')" disabled
					:custom-style="myStyle1" :placeholder-style="placeholderStyle" />
				<view class="u-margin-bottom-20">{{$t("邮箱")}}</view>
				<u-input class="u-margin-bottom-20" height="60" :placeholder="$t('请输入')" disabled
					:custom-style="myStyle1" :placeholder-style="placeholderStyle" />
			</view>
		</u-card>

		<view class="u-margin-top-20">
			<u-cell-group>
				<u-cell-item :title="$t('合作须知')" @click="hz"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-margin-top-20">
			<u-cell-group>
				<u-cell-item :title="$t('服务介绍')" @click="fw"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-margin-top-20 info">
			<view>
				任务编号：235235235235
			</view>
			<view>
				下单时间：235235235235
			</view>
			<view>
				付款时间：235235235235
			</view>
		</view>



		<MoneyFooterVue :text="$t('费用报价')" :money="moneyTotal">
			<template>

				<u-button type="primary" v-if="status === '0'" :custom-style="customStyle1" hover-class="none"
					@click="pay()">
					{{$t("待报价")}}
				</u-button>
				<u-button type="primary" v-if="status === '1'" :custom-style="customStyle" hover-class="none"
					@click="pay()">
					{{$t("立即付款")}}
				</u-button>
				<u-button type="primary" v-if="status === '2'" :custom-style="customStyle2" hover-class="none">
					{{$t("进行中")}}
				</u-button>
				<u-button type="primary" v-if="status === '3'" :custom-style="customStyle3" hover-class="none">
					{{$t("查看回执")}}
				</u-button>
			</template>
		</MoneyFooterVue>
	</view>
</template>

<script>
	import Title from '../components/Title.vue'
	import MoneyFooterVue from '../components/MoneyFooter.vue';
	export default {
		components: {
			MoneyFooterVue,
			Title
		},
		onLoad({
			id
		}) {
			console.log(id);
		},
		data() {
			return {
				placeholderStyle: `fontSize: 24rpx`,
				myStyle1: {
					borderBottom: '1rpx solid #ccc'
				},
				btnStatusBfStyle: {
					background: '#ffeee7',
					'border-radius': '5rpx',
					'min-width': '200rpx',
					'font-size': '24rpx',
					height: '48rpx',
					margin: '0',
					color: '#ff7348',
				},
				customStyle3: {
					background: '#45de3d',
					'border-radius': '35rpx',
					'min-width': '190rpx',
					'font-size': '26rpx',
					height: '70rpx',
				},
				customStyle1: {
					background: '#ffe7e7',
					color: "#ff7070",
					'border-radius': '35rpx',
					'min-width': '190rpx',
					'font-size': '26rpx',
					height: '70rpx',
				},
				customStyle2: {
					background: '#ffeee7',
					color: "#ff4a17",
					'border-radius': '35rpx',
					'min-width': '190rpx',
					'font-size': '26rpx',
					height: '70rpx',
				},
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					'min-width': '190rpx',
					'font-size': '26rpx',
					height: '70rpx',
				},
				moneyTotal: '2989',
				status: '3', // 0 待报价 1 待付款 2 进行中 3 已完成 （待定)
				//包含服务list
				serverList: [{
					name: '通话录音',
					id: '1'
				}, {
					name: '通话录音',
					id: '2'
				}, {
					name: '通话录音',
					id: '3'
				}, {
					name: '通话录音',
					id: '4'
				}, {
					name: '通话录音',
					id: '5'
				}],
			};
		},
		methods: {
			pay() {},
			hz() {
				this.$u.route({
					url: 'pages/teleSales/cooperate/cooperate'
				})
			},
			fw() {
				this.$u.route({
					url: 'pages/teleSales/service/service'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 0 30rpx;
		padding-bottom: 140rpx;

		.info {
			color: #999;
			line-height: 46rpx;
			font-size: 26rpx;
		}

		.bgWhite {
			background-color: #fff;
		}

		.colorRed {
			color: #ff4848;
		}

		.line-height {
			line-height: 80rpx;
		}

		.serverBtn {
			font-size: 20rpx;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
		}

		.bfCheckCard {
			background: #f6f6f6;
			width: 100%;
			border-radius: 10rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 25rpx 0;

			.number {
				margin-top: 10rpx;
				font-size: 44rpx;
				font-weight: 800;
			}
		}

		.fixTop {
			margin: 0 -30rpx;
			padding-top: 30rpx;
			padding-bottom: 10rpx;

			.title {
				font-size: 32rpx;
				font-weight: 800;
			}

			.number {
				color: #ff4a17;
				font-size: 50rpx;
				font-weight: 800;
			}
		}
	}
</style>